import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Button, Tabs } from 'antd';
import { connect } from 'umi';
import SearchForm from './SearchForm';
import UpdateVendor from './UpdateVendor';

const { TabPane } = Tabs;
class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      visible: false,
      formVals: {},
      editStatus: false,
      defaultParams: {},
      params: {},
      
      visibleWork:false,
      formValsWork:{},
      editStatusWork: false,
      hideUpdateForm:false,
    };
  }
  componentDidCatch() {
    this.query;
  }
  query = () => {
    //list 接口
  };
  handleSearch = (values: any) => {
    this.setState(
      {
        params: { ...values },
        pageNumber: 1,
      },
      this.query,
    );
    
  };

  /**
   * 控制新增，编辑事件
   */
  handleSubmit = async (values: any) => {
    const { editStatus } = this.state;
    // const { dispatch } = this.props;
    if (editStatus) {
      // await dispatch({
      //   type: '#/edit',
      //   payload,
      // });
    } else {
      // await dispatch({
      //   type: '#/add',
      //   payload,
      // });
    }
    this.switchVisible();
    this.query();
  };
  /**
   * 控制新增，编辑事件
   */
  handleSubmitWork = async (values: any) => {
    const { editStatusWork } = this.state;
    // const { dispatch } = this.props;
    if (editStatusWork) {
      // await dispatch({
      //   type: '#/edit',
      //   payload,
      // });
    } else {
      // await dispatch({
      //   type: '#/add',
      //   payload,
      // });
    }
    this.switchWork();
    this.query();
  };
  /**
   * 控制更新模态框显示
   * @param {boolean} visible 是否显示
   * @param {object} formVals 模态框默认值
   * @param {boolean} editStatus 是否编辑模式
   */
  switchVisible = (visible = false, formVals = {}, editStatus = false) => {
    this.setState({
      visible,
      formVals,
      editStatus,
    });
  };
  switchWork = (visibleWork = false, formValsWork = {}, editStatusWork = false,hideUpdateForm=false) => {
    this.setState({
      visibleWork,
      formValsWork,
      editStatusWork,
      hideUpdateForm:true,
    });
  };
  render() {
    const columns = [
      {},
      {
        title: '产品编码',
        dataIndex: 'productId',
      },
      {
        title: '供应商',
        dataIndex: 'supplier',
      },
      {
        title: '开始时间',
        dataIndex: 'startDate',
      },
      {
        title: '结束时间',
        dataIndex: 'endDate',
      },
      {
        title: '外购报价',
        dataIndex: 'outPrice',
      },
    ];
    const columns2 = [
      {},
      {
        title: '产品编码',
        dataIndex: 'productId',
      },
      {
        title: '供应商',
        dataIndex: 'supplier',
      },
      {
        title: '开始时间',
        dataIndex: 'startDate',
      },
      {
        title: '结束时间',
        dataIndex: 'endDate',
      },
      {
        title: '工序报价',
        dataIndex: 'productPrice',
      },
    ];
    const list = [
      {
        productId: '2021062801',
        supplier: '无锡企明星科技有限公司',
        startDate: '2021-6-2',
        endDate: '2021-6-27',
        outPrice: '1688',
        productPrice: '2890',
      },
    ];
    const { defaultParams, visible, formVals, editStatus,hideUpdateForm,visibleWork,
      formValsWork,
      editStatusWork, } = this.state;
    const { hideSearchItem } = this.props;
    return (
      <PageHeaderWrapper>
        <Card>
          <Tabs defaultActiveKey="1">
            <TabPane tab={<span>外购报价</span>} key="1">
              <SearchForm onSearch={this.handleSearch} hideSearchForm={hideUpdateForm} defaultParams={defaultParams}>
                <Button type="primary" onClick={() => this.switchVisible(true)}>
                  新增工单
                </Button>
              </SearchForm>
              <Table rowKey="productId" size="small" columns={columns} dataSource={list} />
            </TabPane>
            <TabPane tab={<span>工序报价</span>} key="2">
              <SearchForm onSearch={this.handleSearch} hideSearchForm={hideUpdateForm} defaultParams={defaultParams}>
                <Button type="primary" onClick={() => this.switchWork(true)}>
                  新增
                </Button>
              </SearchForm>
              <Table rowKey="productId" size="small" columns={columns2} dataSource={list} />
            </TabPane>
          </Tabs>
        </Card>
        <UpdateVendor
          visible={visible}
          formVals={formVals}
          hideUpdateForm={hideUpdateForm}
          editStatus={editStatus}
          onCancel={this.switchVisible}
          onSubmit={this.handleSubmit}
        />
        <UpdateVendor
          visible={visibleWork}
          formVals={formValsWork}
          hideUpdateForm={hideUpdateForm}
          editStatus={editStatusWork}
          onCancel={this.switchWork}
          onSubmit={this.handleSubmitWork}
        />
      </PageHeaderWrapper>
    );
  }
}
export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
}))(ViewPage);
